<template>
  <div class="app-container home">
    <div
      id="map"
      style="height: 100%; width: 100%; position: absolute; z-index: 0"
    ></div>
    <div class="panel-left">
      <PredictSummary></PredictSummary>
    </div>
  </div>
</template>

<script>
import PredictSummary from "@/views/applications/predict/summary";

import { baseMap } from "../utils/map";

export default {
  dicts: [],
  components: { PredictSummary },
  data() {
    return {
      map: null,
      tileLayer: null,
      sites: [
        [29.81, 113.32], // lon, lat
        [29.83, 113.34],
        [29.85, 113.38],
        // 添加更多站点...
      ],
    };
  },
  mounted() {
    this.initMap();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    this.map.remove();
  },
  methods: {
    initMap() {
      this.map = baseMap("map");
      this.handleResize();

      var markerlayer = L.layerGroup();
      var ico = L.icon({
        iconUrl: require("@/assets/icons/png/wqMonitor.png"),
        iconSize: [35, 42],
        popupAnchor: [0, -20],
      });
      this.sites.forEach((x) => {
        L.marker(x, {
          icon: ico,
          title: "水质监测点",
        }).addTo(markerlayer);
      });
      this.map.addLayer(markerlayer);
    },
    handleResize() {
      if (this.map) {
        this.map.invalidateSize();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 0rem;
  width: 100%;
  height: calc(100vh - 84px);
  position: relative;
}
.panel-left {
  background-color: 'transparent';
  position: absolute;
  width: 480px;
  height: 640px;
  left: 32px;
  bottom: 32px;
  z-index: 10;
}
</style>
